/**
 * 绑车
 */
import React, {useEffect, useState} from 'react'
import {history, connect, useDispatch} from 'umi'
import {Row, Col, Form, Button, Input, Space, message} from 'antd'
import {useLocation} from 'react-router'
import SelectCar from '../common/selectCar'
import styles from './index.less'
import cardStyles from '../index.less'
import {orderBindCar} from '@/service/order'

const formLayout = {
	labelCol: {
		xs: {span: 24},
		sm: {span: 4},
	},
	wrapperCol: {
		xs: {span: 24, offset: 0},
		sm: {span: 12, offset: 0},
	},
}
function BindCar(props: any) {
	const {
		global: {currentRoute},
		info,
	} = props
	const [orderIds, setOrderIds] = useState('')
	// 获取路由中订单编号
	const location = useLocation()
	const routerName = () => {
		setOrderIds(location?.search?.split('id=')[1])
	}

	useEffect(() => {
		routerName()
	}, [orderIds])
	const dispatch = useDispatch()
	const [loading, setLoading] = useState(false)
	const [openModal, setOpenModal] = useState(false)
	const [data, setData] = useState<any>({
		carId: '',
		number: '',
		vin: '',
		seriesName: '',
		carFashion: {modelName: '', brandName: ''},
		extend: {warehouseId: '', warehouseName: ''},
		depotName: '',
		cityId: '',
		cityName: '',
		insuranceNames: '',
		tiedRemark: '',
	}) // 车辆所有数据
	const onCancel = () => {
		dispatch({
			type: 'global/deleteTabs',
			payload: currentRoute,
		})
		history.goBack()
	}
	const onFinish = (values: any) => {
		setLoading(true)
		const value = {...values}
		// if(value?.insuranceType){
		//   value.insuranceType = value?.insuranceType?.replace('/',',')
		// }

		const obj: any = {
			carId: data?.carId,
			plateNo: data?.number,
			vinNo: data?.vin,
			brandName: data?.carFashion?.brandName,
			seriesName: data?.seriesName,
			modelName: data?.carFashion?.modelName,
			// depotId:data?.warehouseId,
			depotName: data?.warehouseName,
			// cityId:data?.cityId,
			cityName: data?.cityName,
			insuranceNames: value?.insuranceType,
			tiedRemark: value?.tiedRemark,
		}
		orderBindCar(orderIds, obj).then((res) => {
			if (res.success) {
				setLoading(false)
				message.success('绑定成功！')
				onCancel()
			}
		})
	}
	const [form] = Form.useForm<any>()

	const onFinishFailed = () => {}

	const handleSerach = (value: any) => {
		const values = {...value}
		switch (values.insuranceType) {
			case -1:
				values.insuranceType = ''
				break
			case 1:
				values.insuranceType = '交强险'
				break
			case 2:
				values.insuranceType = '商业险'
				break
			case 3:
				values.insuranceType = '承运险'
				break
			case 4:
				values.insuranceType = '交强险/商业险'
				break
			case 5:
				values.insuranceType = '交强险/承运险'
				break
			case 6:
				values.insuranceType = '商业险/承运险'
				break
			case 7:
				values.insuranceType = '交强险/商业险/承运险'
				break
			default:
		}
		form.setFieldsValue(values)
		setData(values)
		setOpenModal(false)
	}
	return (
		<div className={cardStyles.card} id="carInfo">
			<p className={cardStyles.title}>绑车信息</p>
			<div className={styles.form}>
				<Form
					form={form}
					name="basic"
					onFinish={onFinish}
					onFinishFailed={onFinishFailed}
					autoComplete="off"
					{...formLayout}>
					<Row gutter={24} className={cardStyles.rows}>
						<Col span={24}>
							<Form.Item
								name="vin"
								label="选择车架号"
								rules={[
									{required: true, message: '请选择车架号!'},
								]}>
								<Input
									placeholder="请选择车架号"
									onClick={() => setOpenModal(true)}
									style={{width: '300px'}}
								/>
							</Form.Item>
						</Col>
						<Col span={24}>
							<Form.Item
								name="number"
								label="选择车牌号"
								rules={[
									{required: true, message: '选择车牌号'},
								]}>
								<Input
									placeholder="选择车架号后自动带出"
									disabled
									style={{width: '300px'}}
								/>
							</Form.Item>
						</Col>
						<Col span={24}>
							<Form.Item name="carFullName" label="车型品牌/车系">
								<Input
									disabled
									placeholder="选择车牌号/车架号自动获取"
									style={{width: '300px'}}
								/>
							</Form.Item>
						</Col>
						<Col span={24}>
							<Form.Item
								name="warehouseName"
								label="车辆所在仓库">
								<Input
									disabled
									placeholder="选择车牌号/车架号自动获取"
									style={{width: '300px'}}
								/>
							</Form.Item>
						</Col>
						<Col span={0}>
							<Form.Item name="warehouseId" />
						</Col>
						<Col span={24}>
							<Form.Item name="cityName" label="车辆所在城市">
								<Input
									disabled
									placeholder="选择车辆所在城市自动获取"
									style={{width: '300px'}}
								/>
							</Form.Item>
						</Col>
						<Col span={0}>
							<Form.Item name="cityId" />
						</Col>
						<Col span={24}>
							<Form.Item
								name="insuranceType"
								label="车辆已购保险">
								{/* <CheckboxGroup options={insuranceType} /> */}
								<Input
									disabled
									placeholder="车辆已购保险"
									style={{width: '300px'}}
								/>
							</Form.Item>
						</Col>
						<Col span={24}>
							<Form.Item name="tiedRemark" label="备注">
								<Input
									maxLength={200}
									placeholder="请填写绑车备注信息，不超过200个字符"
									allowClear
									style={{width: '600px'}}
								/>
							</Form.Item>
						</Col>
					</Row>
					<Row justify="center" style={{marginTop: '20px'}}>
						<Form.Item>
							<Space>
								<Button shape="round" onClick={onCancel}>
									取消
								</Button>
								<Button
									shape="round"
									type="primary"
									htmlType="submit"
									loading={loading}>
									提交
								</Button>
							</Space>
						</Form.Item>
					</Row>
				</Form>
			</div>
			<SelectCar
				title="选择绑定车辆"
				setIsOpen={setOpenModal}
				isOpen={openModal}
				handleSerach={handleSerach}
				brandId={info}
			/>
		</div>
	)
}

export default connect(({order: {details}, global}: any) => ({
	orderId: details.id,
	global,
}))(BindCar)
